<template>
  <div class="wps-word">
    <wps-edit-bar />
    <div v-if="!wordLoaded" class="loading">
      <loading />
    </div>
    <div class="word-view" ref="wordViewDom" v-show="wordLoaded"></div>
  </div>
</template>

<script setup lang="ts">
import WpsEditBar from '@/components/systemWindow/wps/wpsEditBar.vue'
import { ref, watch } from 'vue'
import { renderAsync } from 'docx-preview'
import type { PropType } from 'vue'

const props = defineProps({
  data: {
    type: String as PropType<string>,
    required: true
  }
})

const wordViewDom = ref<HTMLElement>()
const wordLoaded = ref<boolean>(false)

const init = async () => {
  wordLoaded.value = false
  const url = new URL(props.data, import.meta.url)
  const blob = await fetch(url).then((res) => res.blob())
  let file = new File([blob!], 'fileName.docx', { type: blob.type })
  await renderAsync(file, wordViewDom.value as HTMLElement, undefined, {})
  wordLoaded.value = true
}

watch(() => props.data, init, { immediate: true, deep: true })
</script>

<style scoped lang="scss">
.wps-word {
  .loading {
    width: 100%;
    height: calc(100% - 26px - 78px - 6px * 2);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .word-view {
    width: 100%;
    height: calc(100% - 26px - 78px - 6px * 2);
    overflow-y: auto;
  }
}
</style>
